<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Textarea | TailGrids</title>
    <link
      rel="shortcut icon"
      href="../../assets/images/favicon.svg"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="../../assets/css/tailwind.css" />
  </head>
  <body>
    <!-- ====== Textarea Fields Start -->
    <section class="bg-white py-20 dark:bg-dark">
      <div class="container">
        <div class="w-full max-w-[500px] space-y-10">
          <div>
            <label
              for="default-textarea"
              class="mb-2.5 block text-base font-medium text-dark dark:text-white"
            >
              Message
            </label>
            <textarea
              rows="5"
              name="default-textarea"
              placeholder="Placeholder"
              class="w-full rounded-lg border border-stroke bg-transparent p-5 text-dark placeholder-dark-6 outline-hidden focus:border-primary dark:border-dark-3 dark:text-white dark:placeholder-dark-5"
            ></textarea>
          </div>
          <div>
            <label
              for="default-textarea"
              class="mb-2.5 block text-base font-medium text-dark dark:text-white"
            >
              Message
            </label>
            <textarea
              rows="5"
              name="default-textarea"
              placeholder="Placeholder"
              class="w-full rounded-lg border border-stroke bg-transparent p-5 text-dark placeholder-dark-6 outline-hidden focus:border-primary dark:border-dark-3 dark:text-white dark:placeholder-dark-5"
            ></textarea>
            <p class="pt-2.5 text-sm text-dark-5">Helper Text</p>
          </div>
          <div>
            <label
              for="default-textarea"
              class="mb-2.5 block text-base font-medium text-dark dark:text-white"
            >
              Message
            </label>
            <textarea
              rows="5"
              name="default-textarea"
              placeholder="Placeholder"
              class="w-full rounded-lg border border-stroke bg-transparent p-5 text-dark placeholder-dark-6 outline-hidden focus:border-primary dark:border-dark-3 dark:text-white dark:placeholder-dark-5"
            ></textarea>
            <div class="flex items-center justify-between pt-2.5">
              <p class="text-sm text-dark-5">Helper Text</p>
              <p class="text-sm text-dark-5">0/50</p>
            </div>
          </div>
          <div>
            <label
              for="default-textarea"
              class="mb-2.5 block text-base font-medium text-dark-5"
            >
              Message
            </label>
            <textarea
              rows="5"
              name="default-textarea"
              placeholder="Placeholder"
              disabled
              class="w-full rounded-lg border border-gray-2 bg-gray-2 p-5 text-dark-6 placeholder-dark-6 outline-hidden dark:border-dark-3 dark:bg-dark-3 dark:placeholder-dark-5"
            ></textarea>
          </div>
        </div>
      </div>
    </section>
    <!-- ====== Textarea Fields End -->
  </body>
</html>
